/* 是真没想到这么看起来这么简单的一个网页要写这么多CSS，很多内容我只是略微了解，很多用法非常巧妙 */
*{
    /* 内边距定为零 */
    padding: 0;
    /* 外边距定位零 */
    margin: 0;
}
/* 对"百度热搜"和热搜榜首位的标识以及换一换图片定义 */
/* 自定义字体 */

/* 暂时还不太清楚，后续需要学习 */
@font-face {
    font-family: Iconfont;
    src: url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-5f3e71d33e.eot');
    src: url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-5f3e71d33e.eot?#iefix') format('embedded-opentype'), url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-3585cbf68d.woff2') format('woff2'), url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-37ce8725be.woff') format('woff'), url('https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/font/iconfont-1965a6bc45.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: block;
}
.A {
    left: 0;
    top: 0;
    height: 60px;
    width: 480px;
    padding-left: 24px;
    position: absolute;
    font-size: 0px;
}
/* 对左上导航栏定义 */
/* B指的是每一个小盒子 */
.B {
    height: 22.4px;
    color: #222;
    margin-right: 24px;
    margin-top: 19px;
    /* 这一步是非常重要的一步，在前端网页当中运用非常多，
    通常用于删去超链接文字的下划线和高光效果 */
    text-decoration: none;
    font-family: Arial, sans-serif;
    font-size: 13px;
    display: inline-block;
}
.C {
    position: absolute;
    right: 0;
    top: 0;
    z-index: 100;
    height: 60px;
    padding-right: 24px;
    padding-left: 200px;
}
/* 右上方的“设置”，增加背景颜色 */
/* dispaly需要学习 */
.c1{
    background-color: #4e6ef2;
    position: relative;
    /* 使得设置和登录能够同时显示 */
    display: inline-block;
    margin-top: 18px;
    margin-left: 32px;
    font-size: 13px;
    color: #fff;
    height: 24px;
    width: 48px;
    border-radius: 6px;
    line-height: 24px;
    text-align: center;
}
/* 定义登陆字样 */
.c2 {
    margin-top: 21.2px;
    display: inline-block;
    position: relative;
    vertical-align: top;
    color: #222;
    font-size: 13px;
    font-family: Arial, sans-serif;
}
.c3{
    text-decoration: none;
}
/* 将图片调到正中央 */
.D {
    top: 0px;
    left: 441px;
    position: absolute;
    width: 654px;
    height: 314px;
    display: block;
}

.d3 {
    display: block;
    position: absolute;
    left: 185px;
    bottom: 140px;
}
/* 表单区的定义 */
.e {
    height: 44px;
    width: 654px;
    position: absolute;
    bottom: 80px;
}

.e1 {
    width: 546px;
    display: inline-block;
}
.e2 {
    width: 108px;
    height: 44px;
    position: absolute;
    display: inline-block;
    right: 0px;
}
/* border是表单边界的定义 */
.e3 {
    width: 443px;
    height: 16px;
    padding-top: 12px;
    padding-bottom: 12px;
    padding-left: 16px;
    padding-right: 87px;
    border: 2px solid #c4c7ce;
    border-radius: 10px 0 0 10px;
}

.e3:hover {
    border-color: #a7aab5;
}
/* 百度一下按钮的定义 */
.e4 {
    /* 改变光标样式 */
    cursor: pointer;
    width: 108px;
    height: 44px;
    line-height: 45px;
    padding: 0;
    background: 0 0;
    background-color: #4e6ef2;
    border-radius: 0 10px 10px 0;
    font-size: 17px;
    color: #fff;
    box-shadow: none;
    font-weight: 400;
    border: none;
    outline: 0;
}
/* 小摄像机图标的定义 */
/* 网上随便找的小摄像机，背景还没扣，仔细看会感觉有点怪 */
.e5 {
    position: absolute;
    right: 118px;
    width: 28px;
    display: inline-block;
    bottom: 86px;
    z-index: 1;
}
/* 定义网页下面的一堆东西 */
.F {
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    height: 39px;
    padding-top: 1px;
    line-height: 39px;
    background: #fff;
    font-size: 12px;
    font-family: Arial, sans-serif;
    padding-left: 120px;
}
.f1 {
    display: inline-block;
    text-align: center;
    text-decoration: none;
    color: #bbb;
    margin-right: 20px;
}

.f1:hover {
    color: #222;
}

.f2 {
    width: 49px;
    height: 20px;
    margin-bottom: -5px;
}
/* 定义右下角的空圈和二维码 */
.G {
    position: fixed;
    right: 24px;
    bottom: 64px;
    background-color: #fbfbfb;
    width: 44px;
    border-bottom-left-radius: 22px;
    border-bottom-right-radius: 22px;
    border-top-left-radius: 22px;
    border-top-right-radius: 22px;
}

.g1 {
    line-height: 44px;
    cursor: pointer;
    box-sizing: border-box;
    padding-top: 12px;
    padding-bottom: 12px;
}

.G {
    width: 18px;
    height: 18px;
    margin: 0 auto;
    background-size: 16px;
    background-position: center;
    border-radius: 50%;
    border: 1px solid #626675;
}

.g3 {
    width: 44px;
    height: 44px;
    border-radius: 50%;
}

.g4 {
    width: 100%;
    border-radius: 50%;
    padding: 10px 0;
    cursor: pointer
}

.g5 {
    height: 24px;
    width: 24px;
    margin-right: auto;
    margin-left: auto;
    display: block;
}
.h {
    position: absolute;
    width: 654px;
    margin: 45px auto 0;
    top: 240px;
    left: 440px;
}

.h1 {
    height: 24px;
    height: 100%;
    font-size: 0;
}

.h2 {
    text-decoration: none;
}

.h3:hover {
    color: rgb(49, 94, 251);
}

.h5:hover {
    color: rgb(49, 94, 251);
}

.h3 {
    float: left;
    color: #222;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}

.h4 {
    font-family: Iconfont;
}

.h5 {
    font-family: Iconfont;
    font-size: 15px;
    color: #9195a3;
}

.h6 {
    float: right;
    height: 16px;
    position: relative;
    user-select: none;
    top: 1px;
    text-decoration: none;
}

.h7:hover {
    color: rgb(49, 94, 251);
}

.h8:hover {
    color: rgb(49, 94, 251);
}

.h7 {
    position: relative;
    font-family: Iconfont;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    color: #626675;
    display: inline-block;
}

.h8 {
    font-size: 14px;
    line-height: 14px;
    color: #626675;
    margin-left: 2px;
}
/* 下面就有点繁琐了 */
.h {
    position: absolute;
    width: 654px;
    margin: 45px auto 0;
    top: 240px;
    left: 440px;
}

.h1 {
    height: 24px;
    height: 100%;
    font-size: 0;
}

.h2 {
    text-decoration: none;
}

.h3:hover {
    color: rgb(49, 94, 251);
}

.h5:hover {
    color: rgb(49, 94, 251);
}

.h3 {
    float: left;
    color: #222;
    font-size: 14px;
    font-family: Arial, Helvetica, sans-serif;
}

.h4 {
    font-family: Iconfont;
}

.h5 {
    font-family: Iconfont;
    font-size: 15px;
    color: #9195a3;
}

.h6 {
    float: right;
    height: 16px;
    position: relative;
    user-select: none;
    top: 1px;
    text-decoration: none;
}

.h7:hover {
    color: rgb(49, 94, 251);
}

.h8:hover {
    color: rgb(49, 94, 251);
}

.h7 {
    position: relative;
    font-family: Iconfont;
    width: 16px;
    height: 16px;
    line-height: 16px;
    font-size: 16px;
    color: #626675;
    display: inline-block;
}

.h8 {
    font-size: 14px;
    line-height: 14px;
    color: #626675;
    margin-left: 2px;
}
.i1 {
    margin-right: 20px;
    clear: both;
    width: 306px;
    float: left;
    height: 36px;
    line-height: 36px;
}

.i5 {
    margin-left: 15px;
    width: 306px;
    height: 36px;
    line-height: 36px;
    float: left;
}

li {
    list-style-type: none;
}

.i2 {
    float: left;
    height: 36px;
    line-height: 36px;
    width: 100%;
    color: #222;
    text-decoration: none;
}

.i6 {
    width: auto;
}

.i6:visited {
    color: #626675;
}

.i3 {
    font-family: Iconfont;
    font-size: 18px;
    font-style: normal;
    color: #f63051;
    height: 18px;
    width: 18px;
    display: inline-block;
    line-height: 18px;
    margin-right: 8px;
    position: relative;
    transform: rotate(180deg);
}

.i4 {
    font-size: 16px;
    font-family: Arial, Helvetica, sans-serif;
}
/* 对“热”的定义 */
.i9 {
    margin-left: 6px;
    position: relative;
    top: -2px;
    background-color: #f60;
    padding: 0 2px;
    text-align: center;
    color: #fff;
    line-height: 16px;
    height: 16px;
    font-weight: 200;
    font-size: 12px;
    border-radius: 4px;
}
.n {
    width: 24px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    line-height: 18px;
    position: relative;
    top: 1px;
    display: inline-block;
}

.no3 {
    color: #faa90e;
}

.no1 {
    color: #fe2d46;
}

.no2 {
    color: #f60;
}

.no4 {
    color: #9195a3;
}

.new {
    background-color: #ff455b;
    float: right;
    position: relative;
    top: -25px;
}

.i2:hover {
    color: rgb(49, 94, 251);
    text-decoration: underline;
}